<template>
  <!-- 布局结构树 -->
  <div>
    <el-divider>布局结构树</el-divider>
    <el-tree :data="layoutTree" :props="defaultProps" node-key="renderKey" default-expand-all>
      <span slot-scope="{ node, data }">
        <span class="node-label">
          <svg-icon
            class="node-icon"
            :icon-class="
                data.__config__ ? data.__config__.tagIcon : data.tagIcon
              "
          />
          {{ node.label }}
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
import { traverseTree, deepClone } from "../utils/index";

export default {
  props: {
    value: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      defaultProps: {
        label(data) {
          return (
            data.__config__.componentName ||
            `${data.__config__.label}: ${data.__config__.formId}`
          );
        }
      }
    };
  },
  computed: {
    layoutTree() {
      const tree = [deepClone(this.value)];
      traverseTree(tree, node => {
        node.children = node.__config__.children;
      });
      return tree;
    }
  }
};
</script>

<style lang="scss" scoped>
.node-label {
  font-size: 14px;
}
.node-icon {
  color: #bebfc3;
}
</style>